<!DOCTYPE html>
<html lang="cn">
<head>
    <title>学生登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Phoenixcoded">

    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">

    <!-- 引入jsSHA库用于密码哈希 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/3.2.0/sha.js"></script>

    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-image: url('bg.png'); 
            background-size: cover;
            background-position: center;
            filter: blur(4px);
            z-index: -1;
        }

        .auth-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .auth-content {
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            width: 300px;
            text-align: center;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .btn {
            width: 100%;
            padding: 10px;
            background-color: #4099ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #357ae8;
        }

        a {
            color: #4099ff;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .text-muted {
            color: #6c757d;
        }
        
        .error-message {
            color: #dc3545;
            margin-bottom: 15px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="auth-wrapper">
        <div class="auth-content">
            <a href="https://www.nuit.edu.cn">
                <img src="https://www.nuit.edu.cn/content/main/base/img/logo.png" alt="logo" style="width: 200px; margin-bottom: 40px;">
            </a>

            <h4 class="mb-3">登录</h4>
            <div class="error-message" id="errorMessage"></div>
            <input type="text" class="form-control" id="Email" placeholder="账号" required>
            <input type="password" class="form-control" id="Password" placeholder="密码" required>
            <div style="text-align: left; margin-bottom: 15px;">
                <input type="checkbox" id="rememberMe">
                <label for="rememberMe">记住我</label>
            </div>

            <button class="btn" onclick="handleLogin()">登录</button>
            
            <p class="text-muted">忘记密码？<a href="reset-password.html">重置</a></p>
            <p class="text-muted">还没有账户？<a href="sign.html">注册</a></p>
        </div>
    </div>

    <script>
        // 页面加载时检查是否有保存的凭据
        document.addEventListener('DOMContentLoaded', function() {
            const savedUser = getCookie('savedUser');
            const savedToken = getCookie('authToken');
            
            if (savedUser && savedToken) {
                document.getElementById('Email').value = savedUser;
                document.getElementById('rememberMe').checked = true;
            }
        });

        function handleLogin() {
            const user = document.getElementById("Email").value.trim();
            const password = document.getElementById("Password").value.trim();
            const rememberMe = document.getElementById("rememberMe").checked;
            
            // 简单的客户端验证
            if (!user || !password) {
                showError("请输入账号和密码");
                return;
            }

            // 对密码进行SHA-256哈希
            const shaObj = new jsSHA("SHA-256", "TEXT");
            shaObj.update(password);
            const hashedPassword = shaObj.getHash("HEX");

            // 发送登录请求
            fetch('/api/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    account: user,
                    password: hashedPassword,
                    rememberMe: rememberMe
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 登录成功处理
                    if (rememberMe) {
                        setCookie('savedUser', user, 30);
                        setCookie('authToken', data.token, 30);
                    } else {
                        setCookie('authToken', data.token);
                    }
                    window.location.href = "student.html";
                } else {
                    // 用户不存在时跳转到注册页面
                    if (data.message === "用户不存在") {
                        window.location.href = "sign.html";
                    } else {
                        showError(data.message || "登录失败");
                    }
                }
            })
            .catch(error => {
                showError("网络错误，请稍后重试");
                console.error('Error:', error);
            });
        }

        function showError(message) {
            const errorElement = document.getElementById('errorMessage');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }

        // Cookie操作函数
        function setCookie(name, value, days) {
            let expires = "";
            if (days) {
                const date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        }

        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
    </script>
</body>
</html>